<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data_methods_computed总结</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        data 和 methods 中的属性不能同名
    -->
    <div id="root">
        <!-- 插值表达式必须要在 vm 上能访问到 -->
        <h2>{{x}}</h2>
        <h2>{{y()}}</h2>
        <h2>{{z}}</h2>
        <button @click="y">点我调用y方法</button>
        <button @click="y()">点我调用y方法</button>
        <!-- 注意，Vue 在收集用户输入的值的时候，是以 string 类型结算的，如果输入的是数字类型，需要将结果 * 1 进行转换 -->
        展示 x 的值：<input type="text" placeholder="" v-model="x">
    </div>
    <script>
        const vm =new Vue({
            // 指定 vm(Vue 实例对象) 为哪个容器服务
            el: '#root',
            // 驱动页面显示的数据都放在这里
            data: {
                // x 最终会通过数据代理的方式挂载到 vm
                x: 100,
                hidden: 10
            },
            // 所有用到的函数都配置在这里(不要写箭头函数)
            methods: {
                // 直接挂载到 vm
                y(){
                    console.log('y被调用了');
                    return 200;
                }
            },
            computed: {
                // 不论是函数式还是对象式的 computed，都是以代理的形式挂载到 vm，以属性的形式出现在 vm 上
                // 当你访问 z 的时候，实际上 Vue 会帮你调用它的 get()，返回的 get() 中的返回值
                // 当你修改 z 的时候，实际上 Vue 会帮你调用它的 set()
                z:{
                    set(value){
                        console.log("有人修改 z 了，修改的值为", value);
                        this.hidden = value;
                    },get(){    // z 的值被读取时，get 执行，z 所依赖的值被改变且 z 被展示到页面时，get 执行
                        // 如果不 * 1 将得到 字符串 + 1
                        return this.x + 1;
                    }
                }
            }
        })

        // console.log(vm);
    </script>
</body>
</html>
